<template>
    <div>
    <div class="preview">
        <div class="refresh">
            <el-button type="primary" @click="refresh()">刷新</el-button>
        </div>
        <div class="module">
            <div class="part" style="left: 0px;top:0px;width: 1920px;height: 80px;color: #fff"> <div style="padding: 0 30px; box-sizing:border-box;width:fit-content;margin: 0 auto" :style="{'background-color': moduleObj.isBanner?'#f00':'rgba(0,0,0,0)'}">{{moduleObj.name}}</div></div>
   
            <div class="part-img"><img style="height: 80px" :src="moduleObj.fileUrl" alt=""></div>
            <div v-for="(item,index) in moduleObj.programmeInfoViewList" :key="index">
                <component :is="item.component"  :address="item.apiUrl" :name="item.authUrl" :style="{left: item.assemblyX+'px',top:item.assemblyY+'px',width: item.width+'px',height: item.height+'px'}" />
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import { showLoading, hideLoading } from '../../utils/loading';
export default {
    name: 'workbench',
    data() {
        return {
            moduleObj:{}
        };
    },
    components: {
        
    },
    computed: {
        role() {
            
        }
    },
    created() {
        this.getSelf();
    },
    methods: {

        getSelf() {
            showLoading();
            let arr2 = [];
            const u = '/screen/screenModel/queryModelList?serviceId=1';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    arr2 =  res.data.data;
                    this.moduleObj = arr2[0];
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
            
            hideLoading();
        },
        refresh() {
            this.getSelf();
        }
    }
};
</script>


<style scoped lang="less">
.preview {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;
    .refresh {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-around;
    }
    .module {
        width: 1920px;
        height: 1080px;
        background-color: #001254;
        background-size: contain;
        position: relative;
        transform-origin: 0 0;
        transform: scale(0.7);
        .part {
            color: #7ef0ff;
            box-sizing: border-box;
            position: absolute;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            background: url('../../assets/img/top_nav.png') no-repeat top center;
        }
        .part-img {
            box-sizing: border-box;
            position: absolute;
            left: 50px;top:0px;
            height: 80px;
        }
    }
}

</style>
